<template>
	<view>
		<view class="title">{{cpt.name}}</view>
		
		<view class="t">订单基本信息</view>
		<view class="wBox">
			<view>
				<view class="pp">订单编号： <text>{{order.id}}</text></view>
				<view class="pp">下单时间： <text>{{order.commitTime}}</text></view>
				<view class="pp" v-if="order.groupName">报名参赛队： <text>{{order.groupName}}</text></view>
				<view class="pp"  v-if="order.needPay!='0'">支付方式： 
				 <!-- 0 会员卡支付 1 微信支付 2 线下支付 -->
					<text v-if="order.payType=='0'">会员卡支付</text>
					<text v-if="order.payType=='1'">微信支付</text>
					<text v-if="order.payType=='2'">线下支付</text>
				</view>
				<view class="pp"  v-if="order.needPay!='0'">订单状态： 
					<text v-if="order.payStatus=='0'" class="orange">待支付</text>
					<text v-if="order.payStatus=='1'" class="green">线下支付</text>
					<text v-if="order.payStatus=='2'">付款中</text>
					<text v-if="order.payStatus=='3'" class="green">已支付</text>
					<text v-if="order.payStatus=='4'" class="red">退款中</text>
					<text v-if="order.payStatus=='5'" class="red">已退款</text>
					<text v-if="order.payStatus=='6'">退款核销中</text>
				</view>
				<view class="pp" v-if="order.payTime">付款时间： <text>{{order.payTime}}</text></view>
				<view class="pp"  v-if="order.needPay=='0'">订单金额： <text class="green" style="font-size: 34rpx;">免费订单</text></view>
				<view class="pp"  v-if="order.needPay!='0'">订单金额： <text>{{order.totalAmount}}元</text></view>
				<view class="pp" v-if="order.totalPayAmount">付款金额： <text style="font-size: 34rpx;" class="orange">{{order.totalPayAmount}}元</text></view>
				
			</view>
		</view>
		
		<view class="t" v-if="order.payType == '2'">收款方</view>
		<view class="wBox" v-if="order.payType == '2'">
			<view>
				<view class="pp">收款账户：<text>{{billData.orgBankAccount}}</text></view>
				<view class="pp">开户银行： <text>{{billData.orgBankName}}</text></view>
				<view class="pp">开户账号： <text>{{billData.orgBankAccountNum}}</text></view>
				
			</view>
		</view>
	<view v-if="order.needPay!='0'">
		<view class="t">费用明细</view>
		
		<view class="wBox">
			<!-- 报名费 -->
			<view>
				<view class="t">{{cptRegistrationFee.name}}</view>
				<uni-collapse>
					<uni-collapse-item :border="false" title-border="none">
						<template v-slot:title>
							<view class="h2">
								<text v-if="cptRegistrationFee.count">{{cptRegistrationFee.count}}人</text>   
								合计：<text class="orange">{{cptRegistrationFee.totalFee}}元</text>
							</view>
						</template> 
						<!-- 人员列表 -->
						<uni-list :border="false">
							<uni-list-item :border="false" v-for="(m,index) in cptRegistrationFee.info" :key="index"  
							:thumb="m.personInfo.picUrl" thumb-size="lg" :title="m.personInfo.realName" :right-text="'￥'+ m.registrationFee">
							</uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<view class="wBox" v-if="cptCompatibleFee.totalFee>'0'">
			<view>
				<view class="t">{{cptCompatibleFee.name}}</view>
				<uni-collapse>
					<uni-collapse-item  :border="false" title-border="none">
						<template v-slot:title>
							<view class="h2">
								<text v-if="cptCompatibleFee.count">{{cptCompatibleFee.count}}人</text>   
								合计：<text class="orange">{{cptCompatibleFee.totalFee}}元</text>
							</view>
						</template> 
						<!-- 人员列表 -->
						<uni-list :border="false">
							<uni-list-item :border="false" v-for="(m,index) in cptCompatibleFee.info" :key="index"  
							:thumb="m.personInfo?.picUrl" :title="m.personInfo?.realName" thumb-size="lg" :right-text="'￥'+ m.compatibleFee">
							</uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>

			</view>
		</view>
		<view class="wBox" v-if="cptInsuranceFee.totalFee>'0'">
			<view>
				<view class="t">{{cptInsuranceFee.name}}</view>
				<uni-collapse>
					<uni-collapse-item  :border="false" title-border="none">
						<template v-slot:title>
							<view class="h2">
								<text v-if="cptInsuranceFee.count">{{cptInsuranceFee.count}}人</text>   
								合计：<text class="orange">{{cptInsuranceFee.totalFee}}元</text>
							</view>
						</template> 
						<!-- 人员列表 -->
						<uni-list :border="false">
							<uni-list-item :border="false" v-show="m.buyFlag=='1'" v-for="(m,index) in cptInsuranceFee.info" :key="index"  
							:right-text="'￥'+ m.insuranceFee" :title="m.personInfo.realName" :note="m.personInfo.idcCode"
							:thumb="m.personInfo.picUrl" thumb-size="lg">
							</uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<view class="wBox" v-if="otherFee.totalFee>'0'">
			<view>
				<view class="t">{{otherFee.name}}</view>
				<uni-collapse>
					<uni-collapse-item  :border="false" title-border="none">
						<template v-slot:title>
							<view class="h2">
								<text v-if="otherFee.count">{{otherFee.count}}人</text>   
								合计：<text class="orange">{{otherFee.totalFee}}元</text>
							</view>
						</template> 
						<!-- 人员列表 -->
						<uni-list :border="false">
							<uni-list-item :border="false" v-for="(m,index) in otherFee.info" :key="index"  
							:thumb="m.personInfo.picUrl" thumb-size="lg" :title="m.personInfo.realName"  :right-text="'￥'+ m.otherFee">
							</uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
<!-- 		<view class="wBox" v-if="teamFee.totalFee>'0'">
			<view>
				<view class="t">{{teamFee.name}}</view>
				<uni-collapse>
					<uni-collapse-item  :border="false" title-border="none">
						<template v-slot:title>
							<view class="h2">
								<text v-if="teamFee.count">{{teamFee.count}}人</text>   
								合计：<text class="orange">{{teamFee.totalFee}}元</text>
							</view>
						</template> 
						<uni-list :border="false">
							<uni-list-item v-for="(m,index) in teamFee.info" :key="index"  :border="false"
							:rightText="'￥'+ m.teamFee" :title="m.groupName" :note="m.teamName">
							</uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
 -->	</view>
		<view class="fBottom" v-if="order.needPay!='0'">
			<view class="pp" v-if="cptRegistrationFee.totalFee>0">{{cptRegistrationFee.name}}:<text>{{cptRegistrationFee.totalFee}}元</text></view>
			<view class="pp" v-if="cptCompatibleFee.totalFee>0">{{cptCompatibleFee.name}}:<text>{{cptCompatibleFee.totalFee}}元</text></view>
			
			<view class="pp" v-if="cptInsuranceFee.totalFee>0">{{cptInsuranceFee.name}}:<text>{{cptInsuranceFee.totalFee}}元</text></view>
			<view class="pp" v-if="otherFee.totalFee>0">{{otherFee.name}}:<text>{{otherFee.totalFee}}元</text></view>
			<view class="pp" v-if="teamFee.totalFee>0">{{teamFee.name}}:<text>{{teamFee.totalFee}}元</text></view>
			<view class="pp" v-if="cptDepositFee.totalFee>0">{{cptDepositFee.name}}:<text>{{cptDepositFee.totalFee}}元</text></view>
			<view class="pp" v-if="order.totalPayAmount">已缴纳费用：<text>{{order.totalPayAmount}}元</text></view>
			<view class="txr">
				合计：<text class="orange">{{order.totalAmount}}元</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, toRefs } from 'vue';
import * as match from '@/common/match.js';
import { onLoad } from '@dcloudio/uni-app';
const data = reactive({
	billData: {},
	cpt: {},
	order: {},
	totalFee: {},
	billId:'',
	teamFee:{},
	otherFee:{},
	cptInsuranceFee:{},
	cptDepositFee:{},
	cptCompatibleFee:{},
	cptRegistrationFee:{}
});	
const { billData, cpt,order,totalFee, billId,teamFee,otherFee,cptRegistrationFee,cptInsuranceFee,cptDepositFee,cptCompatibleFee} = toRefs(data)
onLoad((option)=>{
	console.log(option)
	if(option.id){
		billId.value = option.id
		getData(billId.value)
	}
})

function getData(n){
	match.getMyOrderDetail(n).then(res=>{
		billData.value = res.data
		cpt.value = res.data.cpt
		order.value = res.data.order
		totalFee.value = res.data.totalFee
		teamFee.value = res.data.totalFee.teamFee
		otherFee.value = res.data.totalFee.otherFee
		cptInsuranceFee.value = res.data.totalFee.cptInsuranceFee
		cptRegistrationFee.value = res.data.totalFee.cptRegistrationFee
		cptDepositFee.value = res.data.totalFee.cptDepositFee
		cptCompatibleFee.value = res.data.totalFee.cptCompatibleFee
	})
}

</script>

<style scoped lang="scss">
	.t{font-size: 30rpx;    margin: 0 30rpx;}
	.poKxBtn{position: absolute;top: -70rpx; right: 0;font-size: 24rpx;line-height: 2;}
	:deep(.uni-group__content){padding: 0;}
	.addBtn {
		width: 700rpx;
		height: 90rpx;
		background: #ffffff;
		border: 1rpx solid #d43e3e;
		color: #d43e3e;
		font-size: 30rpx;
		border-radius: 15rpx;
	}
	.wBox {position: relative;background: #ffffff;border-radius: 15px;box-sizing: border-box; width: 700rpx; margin: 20rpx auto 36rpx; padding: 30rpx;
		.t{margin: 0 0 20rpx;}
		:deep(.uni-collapse-item){margin: 0;padding: 0;}
		:deep(.uni-list-item__container){padding-left: 0!important;align-items: center;}
		:deep(.uni-list-item__extra-text){white-space: nowrap;}
	}

	.avatarUrl{width: 200rpx;height:200rpx;}
	.avatarUrl button{padding: 0;display: block;line-height: 1;}
	.refreshIcon{width: 200rpx;height:200rpx;}
	.rank-image{width: 90rpx;height: 90rpx; background: #f8f8f8;  border-radius: 50%;}
	.title{font-weight: 500;color: #2B3133;    text-align: center; margin: 20rpx 0 40rpx;font-size: 36rpx;    padding: 0 30rpx;}

	.h2{    font-size: 28rpx;}
	.soltbodyName{font-size:30rpx;}
	.soltbodyText{font-size:26rpx;color: #999;}
</style>
